<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-office-building"></i> 数据广场</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-tabs type="border-card" class="main">
            <el-tab-pane label="文件广场">
                <el-table :data="state.sharedFileList">
                    <el-table-column label="文件名">
                        <template #default="scope">
                            {{scope.row.fileName}}
                        </template>
                    </el-table-column>
                    <el-table-column label="发布者">
                        <template #default="scope">
                            {{scope.row.username}}
                        </template>
                    </el-table-column>
                    <el-table-column label="发布时间">
                        <template #default="scope">
                            {{scope.row.uploadTime}}
                        </template>
                    </el-table-column>
                    <el-table-column label="文件地址">
                        <template #default="scope">
                            {{scope.row.fileUri}}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button type="text" style="margin-right: 10px"
                                       @click="handleFileDetail(scope.row.id)">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>

            <el-tab-pane label="模型广场">
                <el-table :data="state.sharedModelList">
                    <el-table-column label="模型名">
                        <template #default="scope">
                            {{scope.row.modelName}}
                        </template>
                    </el-table-column>
                    <el-table-column label="发布者">
                        <template #default="scope">
                            {{scope.row.username}}
                        </template>
                    </el-table-column>
                    <el-table-column label="模型地址">
                        <template #default="scope">
                            {{scope.row.modelUri}}
                        </template>
                    </el-table-column>
                    <el-table-column label="模型算法">
                        <template #default="scope">{{ handleAlgorithmName(scope.row.machineLearningAlgorithm) }}</template>
                    </el-table-column>
                    <el-table-column prop="arguments" label="参数值" :show-overflow-tooltip="true">
                        <template #default="scope">
                            <div v-for="(item,index) in scope.row.trainParams" :key="index">{{index}}: {{item}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button type="text" style="margin-right: 10px; color: #e6a23c"
                                       @click="handleCollectModel(scope.row.id)">收藏</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>

            <el-tab-pane label="已收藏文件">
                <el-table :data="state.collectFileList">
                    <el-table-column label="文件名">
                        <template #default="scope">
                            {{scope.row.fileName}}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button type="text" style="margin-right: 10px"
                                       @click="handleCollectFileDetail(scope.row.id)">查看</el-button>
                            <el-button type="text" style="margin-right: 10px; color: red"
                                       @click="handleCollectFileDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>

            <el-tab-pane label="已收藏模型">
                <el-table :data="state.collectModelList">
                    <el-table-column label="模型名">
                        <template #default="scope">
                            {{scope.row.modelName}}
                        </template>
                    </el-table-column>
                    <el-table-column label="模型算法">
                        <template #default="scope">{{ handleAlgorithmName(scope.row.machineLearningAlgorithm) }}</template>
                    </el-table-column>
                    <el-table-column prop="arguments" label="参数值" :show-overflow-tooltip="true">
                        <template #default="scope">
                            <div v-for="(item,index) in scope.row.trainParams" :key="index">{{index}}: {{item}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button type="text" style="margin-right: 10px"
                                       @click="handleCollectModelUse(scope.row.id)">使用</el-button>
                            <el-button type="text" style="margin-right: 10px; color: red"
                                       @click="handleCollectModelDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>

            <el-dialog
                    v-model="useModelVisible"
                    title="模型使用"
                    width="30%"
                    :before-close="handleClose"
            >
                <el-form :model="useform" width="300px">
                    <el-form-item label="选择文件" >
                        <el-select v-model="useform.file" :label-width="120" placeholder="请选择您要使用的文件">
                            <el-option
                                    v-for="item in fileList.valueOf()"
                                    :key="item.id"
                                    :label="item.fileName"
                                    :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                </el-form>
                <template #footer>
          <span class="dialog-footer">
            <el-button @click="useModelVisible = false">取消</el-button>
            <el-button type="primary" @click="useModel(useform.file)" style="margin-left: 10px"> 使用模型 </el-button>
          </span>
                </template>
            </el-dialog>
        </el-tabs>
    </div>
</template>

<script>
    import {reactive, ref, onMounted} from "vue";
    import {useRouter} from "vue-router";
    import {
        collectModel,
        getCollectFileList, getCollectModelList,
        getSharedFileList,
        getSharedModelList
    } from "../../api/square";
    import {ElMessage, ElMessageBox} from "element-plus";
    import {useStore} from "vuex";
    import {use} from "../../api/prediction";
    import {GetAllFile} from "../../api/file";

    export default {
        name: "newSquare",
        setup() {
            const ms_username = localStorage.getItem('ms_username');
            const router = useRouter();
            let userId = localStorage.getItem("ms_userId");

            let collectModelDialogVisible = false;

            let state = reactive({
                sharedFileList: [],
                sharedModelList: [],
                collectFileList: [],
                collectModelList: []
            });

            const handleSharedFileList=()=>{
                getSharedFileList(userId).then(res => {
                    state.sharedFileList = res.result;
                })
            };

            const handleSharedModelList=()=>{
                getSharedModelList(userId).then(res => {
                    console.log(res)
                    state.sharedModelList = res.result;
                })
            };

            const handleCollectFileList=()=>{
                getCollectFileList(userId).then(res => {
                    state.collectFileList = res.result;
                })
            };

            const handleCollectModelList=()=>{
                getCollectModelList(userId).then(res => {
                    state.collectModelList = res.result;
                });
                GetAllFile(userId).then(res=>{
                    let myfile = res;
                    getCollectFileList(userId).then(res=>{
                        fileList.value = myfile.result.concat(res.result);
                    })
                })
            };

            const handleCollectModel=(modelId)=>{
                const payload = {
                    userId: localStorage.getItem("ms_userId"),
                    modelId: modelId,
                };
                collectModel(payload).then(res => {
                    if (res.msg === "成功") {
                        ElMessage.success("已成功收藏模型！");
                        handleCollectModelList();
                    } else {
                        ElMessage.error("收藏模型失败！" + res.msg);
                    }
                })

            };

            const handleFileDetail=(fileId)=>{
                router.push({
                    path:'shareFileDetail',
                    query:{
                        fileId:fileId,
                    }
                })
            };

            const handleCollectFileDetail=(fileId)=>{
                router.push({
                    path:'collectFileDetail',
                    query:{
                        fileId:fileId,
                    }
                })
            };

            const handleCollectFileDelete=(fileId)=>{

            };

            let fileList=ref();
            let useform = reactive({
                file: "",
            });
            const useModelVisible = ref(false);
            const usemodelId=ref();

            const handleCollectModelUse=(modelId)=>{
                useModelVisible.value=true;
                usemodelId.value=modelId;
            };

            const useModel = (fileId) => {
                if (fileId === ""){
                    alert("请填写信息！")
                    return
                }
                useModelVisible.value=false;
                let payload={
                    modelId:usemodelId.value,
                    fileInfoId:fileId,
                    userId: localStorage.getItem("ms_userId"),
                }
                console.log(payload.fileInfoId )
                ElMessageBox( {
                    title: "确定要预测吗？",
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true
                            instance.confirmButtonText = '预测中...'
                            use(payload).then(res=>{
                                instance.confirmButtonLoading = false
                                console.log("predic_res: ",res);
                                if (res.msg === '成功')
                                {
                                    ElMessage.success("已成功预测，请移至预测结果查看")
                                    done()
                                }
                                else
                                {
                                    console.log(res);
                                    ElMessage.error("预测失败!失败码:"+res.msg);
                                    done()
                                }
                            }).catch(err=>{
                                console.log(err)
                            });
                        } else {
                            done()
                        }
                    },
                })
            };

            const handleCollectModelDelete=(modelId)=>{

            };

            const handleAlgorithmName=(name)=>{
                if (name === "DECISION_TREE_CLASSIFICATION") {
                    return "决策树分类";
                } else if (name === "GRADIENT_BOOSTED_TREE_CLASSIFICATION") {
                    return "梯度提升树分类";
                } else if (name === "LOGISTIC_REGRESSION_CLASSIFICATION") {
                    return "对数几率回归分类";
                } else if (name === "MULTILAYER_PERCEPTRON_CLASSIFICATION") {
                    return "多层感知器分类";
                } else if (name === "NAIVE_BAYES_CLASSIFICATION") {
                    return "朴素贝叶斯分类";
                } else if (name === "XGBOOST_CLASSIFICATION") {
                    return "XGBOOST分类";
                } else if (name === "RANDOM_FOREST_CLASSIFICATION") {
                    return "随机森林分类";
                } else if (name === "K_MEANS_CLUSTERING") {
                    return "K均值聚类";
                } else if (name === "DECISION_TREE_REGRESSION") {
                    return "决策树回归算法";
                } else if (name === "RANDOM_FOREST_REGRESSION") {
                    return "随机森林回归";
                }
            };

            onMounted(()=>{
                handleSharedFileList(userId);
                handleSharedModelList(userId);
                handleCollectFileList(userId);
                handleCollectModelList(userId);
            })

            return {
                ms_username,
                router,
                userId,
                state,

                handleSharedFileList,
                handleSharedModelList,
                handleCollectFileList,
                handleCollectModelList,

                handleFileDetail,
                handleCollectModel,
                handleCollectFileDetail,
                handleCollectFileDelete,
                handleCollectModelUse,
                handleCollectModelDelete,

                fileList,
                useform,
                useModel,
                usemodelId,
                useModelVisible,

                collectModelDialogVisible,
                handleAlgorithmName
            }

        },
    }
</script>

<style scoped>
.dialogClass {
    width: 80%;
}
</style>
